<template>
  <view>
    <!-- 要转换的容器 -->
	<view id="containerid">内容内容内容</view>
    <canvas canvas-id="canvas" style="width: 300px; height: 200px;background-color: red;">
		<view>xcavas内容</view>
		<view>xcavas内容</view>
		<view>xcavas内容</view>
	</canvas>
    <button @click="generateImage">生成并下载图片</button>
  </view>
</template>
<script>
	export default {
	  methods: {
	    async generateImage() {
	      const ctx = uni.createCanvasContext('canvas', this); // 获取canvas上下文
		 ctx.setStrokeStyle('red')
		 ctx.moveTo(150, 20)
		 ctx.lineTo(150, 170)
		 ctx.stroke()
		 
		 ctx.setFontSize(15)
		 ctx.setTextAlign('left')
		 ctx.fillText('textAlign=left', 150, 60)
		 
		 ctx.setTextAlign('center')
		 ctx.fillText('textAlign=center', 150, 80)
		 
		 ctx.setTextAlign('right')
		 ctx.fillText('textAlign=right', 150, 100)
		 
	      ctx.draw(true, () => {
	        uni.canvasToTempFilePath({
	          canvasId: 'canvas',
	          success: (res) => {
	            // 生成图片的临时文件路径
	            const tempFilePath = res.tempFilePath;
	            console.log(tempFilePath);
	            // 可以将tempFilePath发送到服务器，或者使用uni.saveFile保存到本地
	            uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
	              filePath: tempFilePath,
	              success: function () {
	                uni.showToast({
	                  title: '图片已保存到相册',
	                  icon: 'success',
	                  duration: 2000
	                });
	              }
	            });
	          },
	          fail: (err) => {
	            console.error(err);
	          }
	        }, this);
	      });
	    }
	  }
	}
</script>
